<template>
  <div>
    <el-container>
      <el-header height="4.5rem"
        ><div class="block">
          <el-avatar :size="80" :src="circleUrl"></el-avatar>
        </div>
        <h4>{{ name }}</h4>
        <p>{{ number }}</p></el-header
      >
      <el-main>
        <div class="icon">
          <i class="el-icon-notebook-1"></i>
          <p>本周学习时长：{{ learningTime }}</p>
        </div>
      </el-main>
      <el-main>
        <div class="text item informationItem">
          <div class="icon">
            <i class="el-icon-arrow-right"></i>
            <el-button
              type="text"
              style="font-size: 20px; color: #2c3e50"
              @click="toIndex"
            >
              回到首页
            </el-button>
          </div>
          <el-divider></el-divider>
        </div>
        <div class="text item informationItem">
          <div class="icon">
            <i class="el-icon-arrow-right"></i>
            <el-button
              type="text"
              style="font-size: 20px; color: #2c3e50"
              @click="toBookInfo"
            >
              我的预约
            </el-button>
          </div>
          <el-divider></el-divider>
        </div>
        <div class="text item informationItem">
          <div>
            <i class="el-icon-arrow-right"></i>
            <el-button
              type="text"
              style="font-size: 20px; color: #2c3e50"
              @click="toMyInfo"
            >
              我的信息
            </el-button>
          </div>
          <el-divider></el-divider>
        </div>
        <div class="text item informationItem">
          <div class="icon">
            <i class="el-icon-arrow-right"></i>
            <el-button type="text" style="font-size: 20px; color: #2c3e50">
              退出/切换账号
            </el-button>
          </div>
          <el-divider></el-divider>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
}
div {
  font-size: 20px;
}
.el-header {
  margin-bottom: 1rem;
  color: #333;
  text-align: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.el-main {
  margin-bottom: 1rem;
  color: #333;
  text-align: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
body > .el-container {
  margin-bottom: 40px;
}
.informationItem {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
</style>
<script>
import axios from "axios";
import { del, get } from "@/utils/request";
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      userInfo: {},
      userId: "",
      learningTime: "",
      name: "",
      number: "",
    };
  },
  methods: {
    toIndex() {
      this.$router.replace("/");
    },
    toBookInfo() {
      this.$router.replace("/myBookInfo");
    },
    toMyInfo() {
      this.$router.replace("/myInfo");
    },
    async getLearnningTime() {
      let url = "http://120.77.41.127:8080/nameUser/query";
      let data = await get(url);
      this.userInfo = data.data;
      this.userId = sessionStorage.getItem("userId");
      this.name = sessionStorage.getItem("userName");
      this.number = sessionStorage.getItem("userNumber");
      let longtime = sessionStorage.getItem("longTime");
      console.log(this.userId);
      if (this.userId == null) {
        this.learningTime = "未登录";
        this.name = "未登录";
      } else {
        for (let i = 0; i < this.userInfo.length; i++) {
          if (this.userInfo[i].id == this.userId) {
            this.learningTime = this.userInfo[i].learningTime;
            this.learningTime = Number(this.learningTime) + Number(longtime);
            axios({
              url: "http://120.77.41.127:8080/nameUser/saveOrUpdate",
              method: "post",
              params: {
                id: this.userId,
                learningTime: this.learningTime,
                name: this.name,
                number: this.number,
              },
            }).then((res) => {
              console.log(res);
            });

            if (this.learningTime == null) {
              this.learningTime = 0;
            }
            break;
          }
        }
      }
    },
  },
  mounted: function () {
    this.getLearnningTime();
  },
};
</script>